<div class="main-container">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" id="title" required lay-verify="required" autocomplete="off"
                       placeholder="请输入标题"
                       class="layui-input" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">标识</label>
            <div class="layui-input-block">
                <input type="text" name="key" required lay-verify="required" value="" autocomplete="off"
                       class="layui-input">
                <tip>控制器路径：命名空间+控制器名称，例如：plugin\admin\app\controller\AdminController。</tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上级菜单</label>
            <div class="layui-input-block">
                <div name="pid" id="pid" value="0"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">url</label>
            <div class="layui-input-block">
                <input type="text" name="href" value="" class="layui-input">
                <tip>页面打开地址，例如：/app/admin/role/index</tip>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">图标</label>
            <div class="layui-input-block">
                <input name="icon" id="icon"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-inline">
                <div name="type" id="type" value="1"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="number" name="weight" value="100" class="layui-input">
                <tip>越小越靠前</tip>
            </div>
        </div>

        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="layui-btn layui-btn-sm" lay-submit=""
                        lay-filter="data-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </div>

    </form>
</div>
<script>
  let PRIMARY_KEY = "id";
  let getPid = "{:request()->get('id')??0}";
  layui.use(["form", "iconPicker", "util"], function () {
    var $ = layui.$;
    var form = layui.form;

    // 图标选择
    layui.iconPicker.render({
      elem: "#icon",
      type: "fontClass",
      page: false,
    });

    // 获取上级菜单
    layui.use(["xmSelect"], function () {
      layui.$.ajax({
        url: "/app/admin/rule/select?format=tree&type=0,1",
        dataType: "json",
        success: function (res) {
          if (res.code !== 200) {
            return hui_toast('error', res.msg);
          }
          let value = getPid;
          let initValue = value ? value.split(",") : [];
          layui.xmSelect.render({
            el: "#pid",
            name: "pid",
            initValue: initValue,
            tips: "无",
            toolbar: {show: true, list: ["CLEAR"]},
            data: res.data,
            theme: {color: 'var(--global-primary-color)'},
            model: {"icon": "hidden", "label": {"type": "text"}},
            clickClose: true,
            radio: true,
            tree: {show: true, "strict": false, "clickCheck": true, "clickExpand": false, expandedKeys: initValue},
          });
        }
      })
    });

    //下拉：类型
    layui.use(["xmSelect"], function () {
      let value = layui.$("#type").attr("value");
      let initValue = value ? value.split(",") : [];
      layui.xmSelect.render({
        el: "#type",
        name: "type",
        initValue: initValue,
        data: [{"value": "0", "name": "目录"}, {"value": "1", "name": "菜单"}, {"value": "2", "name": "权限"}],
        theme: {color: 'var(--global-primary-color)'},
        model: {"icon": "hidden", "label": {"type": "text"}},
        clickClose: true,
        radio: true,
      });
    });

    // 提交事件
    layui.form.on("submit(data-save)", function (data) {
      layui.$.ajax({
        url: '/app/admin/rule/add',
        type: "POST",
        dateType: "json",
        data: data.field,
        success: function (res) {
          if (res.code !== 200) {
            return hui_toast('error', res.msg);
          }
          return hui_toast('success', "操作成功", function () {
            //刷新数据表格
            if (parent.hasOwnProperty('refreshTable')) {
              refreshTable('ruleTable', 2);
              layer.closeAll('page');
            }
          });
        }
      });
      return false;
    });

  });
</script>
